<template>
	<view>
		<!-- 顶部组件 -->
		<view class="nav-bar">
			<u-navbar
				:background="navBar.top_bgc"
				:border-bottom="navBar.border"
				:back-icon-color="navBar.iconColor"
				id="nav-bar"
				:title="navBar.title"
				title-color="#fff"
			></u-navbar>
		</view>
		<!-- 顶部背景图 -->
		<view class="top-bg"><image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/13d3ac60-ad36-11ea-b244-a9f5e5565f30.png"></image></view>
		<!-- 前10榜单 -->
		<view class="top10">
			<view
				class="goods-box u-flex"
				v-for="(item, index) in topGoodsList"
				:key="index"
				@click="goToDetail(item.gid)"
				:style="{ backgroundImage: item.config.CardbackgroundImage.backgroundImage }"
			>
				<u-lazy-load class="goods-img" :border-radius="12" :image="item.img800s" loading-img="/static/lazy/goods-lazy-load.png"></u-lazy-load>
				<view class="content u-flex-col">
					<view class="title u-line-2">{{ item.name }}</view>
					<view class="subtitle u-line-1">{{ item.summary }}</view>
					<view class="cate u-flex" :style="{ backgroundImage: item.config.backgroundImage.backgroundImage }">
						<image :src="item.config.urlTop"></image>
						<text>{{ item.new_cid1_name }}</text>
					</view>
					<view class="price u-flex">
						<text>￥</text>
						<text class="priceMin">{{ item.price_min / 100 }}</text>
						<text class="spec" v-if="item.price_tag">起</text>
						<text class="marketPrice" v-if="item.price_min != item.market_price">￥{{ item.market_price / 100 }}</text>
						<view class="labelbox" v-if="item.labels.length != 0">
							<text v-for="(litem, lindex) in item.labels" :key="lindex" v-if="lindex < 2">{{ litem.attr.text }}</text>
						</view>
					</view>
				</view>
				<image :src="item.config.urlRank" class="ranking"></image>
			</view>
		</view>
		<!-- 广告banner -->
		<view class="ad-banner" v-if="categoryList.length != 0"><image src="https://img.youpin.mi-img.com/jianyu/30d0eb9b500eb16212f5d9a1f6372a28.png"></image></view>
		<!-- 品类榜单 -->
		<view class="pinlei" v-if="categoryList.length != 0">
			<view class="module-title"><image src="https://img.youpin.mi-img.com/jianyu/3e67938a7bed549fae268eaf6518403f.png"></image></view>
			<view class="item-box u-flex">
				<view class="item" v-for="(item, index) in categoryList" :key="index" @click="goToDetail(item.gid)">
					<u-lazy-load class="img" :border-radius="12" :image="item.img800s" loading-img="/static/lazy/goods-lazy-load.png"></u-lazy-load>
					<view class="info u-flex">
						<text>{{ item.ranging_info.name }}</text>
						<image src="https://img.youpin.mi-img.com/tetris/8548aa9bc09d1b654240af901d30683b.png"></image>
					</view>
					<view class="summary">{{ item.ranging_info.summary }}</view>
				</view>
			</view>
		</view>
		<!-- 瀑布流商品 -->
		<view class="waterfall" v-if="waterfullGoods.length != 0">
			<view class="module-title"><image src="https://img.youpin.mi-img.com/jianyu/82d97011ffaafc24067fd50c541b5709.png"></image></view>
			<view class="goods-list u-flex">
				<view class="goods-box" v-for="(item, index) in waterfullGoods" :key="index" @click="goToDetail(item.gid)">
					<u-lazy-load class="goods-img" :border-radius="12" :image="item.img800s" loading-img="/static/lazy/goods-lazy-load.png"></u-lazy-load>
					<view class="title u-line-1">{{ item.name }}</view>
					<view class="price u-flex">
						<text>￥</text>
						<text class="priceMin">{{ item.price_min / 100 }}</text>
						<text class="spec" v-if="item.price_tag">起</text>
						<text class="marketPrice" v-if="item.price_min != item.market_price">￥{{ item.market_price / 100 }}</text>
					</view>
					<view class="rankinfo u-flex">
						<text>{{ item.ranging_info.full_name }}</text>
						<image src="https://img.youpin.mi-img.com/tetris/19483dac3cb0410d55320cb41bfd6e69.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view v-show="showLoadmore">
			<u-loadmore :status="loadingStatus" :margin-top="30" :margin-bottom="30" bg-color="#01172f" color="#666" icon-color="#666" :font-size="24" :load-text="loadingText" />
		</view>
		<full-loading :show="fullLoading" :top="60"></full-loading>
		<mi-toast ref="miToast"></mi-toast>
	</view>
</template>

<script>
import fullLoading from '@/components/full-loading.vue'
export default {
	data() {
		return {
			navBar: {
				top_bgc: {
					background: 'transparent'
				},
				border: false,
				title: '',
				height: 0,
				iconColor: '#fff'
			},
			fullLoading: true,
			topGoodsList: [],
			categoryList: [],
			waterfullGoods: [],
			waterfullOffset: 0,
			loadingStatus: 'loadmore',
			loadingText: {
				loadmore: '上拉加载更多',
				loading: '努力加载中~',
				nomore: '没有更多商品了'
			},
			count: 0
		}
	},
	onLoad() {
		this.getData()
		this.getViewHeight()
	},
	methods: {
		getData() {
			this.$u.api
				.topList()
				.then(res => {
					console.log(res)
					this.disposeData(res.floors)
					// 处理顶部商品列表配置背景图，排行图标等
					for (var i = 0; i < this.topGoodsList.length; i++) {
						this.$set(this.topGoodsList[i], 'config', res.config[i])
					}
					this.fullLoading = false
				})
				.catch(err => {
					console.log(err)
				})
		},
		disposeData(item) {
			item.forEach((x, i) => {
				switch (x.module_key) {
					case 'tp_lb_list': // top10
						this.topGoodsList = item[i].data.result.list
						break
					case 'tp_lb_category': // 分类榜单
						this.categoryList = item[i].data.result.list.splice(0, 9)
						break
					case 'tp_lb_waterfull': // 瀑布流商品
						this.waterfullOffset = item[i].data.result.paging.offset
						this.waterfullGoods = item[i].data.result.list
						break
				}
			})
		},
		getMoreGoods() {
			let data = {
				offset: this.waterfullOffset,
				limit: 10
			}
			this.$u.api.topGoodsList(data).then(res => {
				this.loadingStatus = 'loadmore'
				this.waterfullOffset = res.data.paging.offset
				this.waterfullGoods.push(...res.data.list)
			})
		},
		getViewHeight() {
			uni.createSelectorQuery()
				.in(this)
				.select('#nav-bar')
				.boundingClientRect(data => {
					this.navBar.height = data.height
				})
				.exec()
		},
		goToDetail(gid) {
			uni.navigateTo({
				url: '../../shop/goods/detail/detail?gid=' + gid
			})
		}
	},
	onReachBottom() {
		if (this.count < 8) {
			this.loadingStatus = 'loading'
			this.getMoreGoods()
			this.count++
		} else {
			this.loadingStatus = 'nomore'
		}
	},
	onPageScroll(e) {
		if (e.scrollTop > this.navBar.height) {
			this.navBar.top_bgc.background = '#01172f'
			this.navBar.title = '热销排行'
		} else {
			this.navBar.top_bgc.background = 'transparent'
			this.navBar.title = ''
		}
	},
	components: {
		fullLoading
	},
	computed: {
		showLoadmore() {
			return this.waterfullGoods.length !== 0 ? true : false
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #01172f;
}
.nav-bar {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}
.top-bg {
	width: 750rpx;
	height: 515rpx;
	z-index: -1;
	image {
		width: 100%;
		height: 100%;
	}
}
.card {
	width: 710rpx;
	margin: 20rpx;
	border-radius: 12rpx;
	background-color: #fff;
	.head {
		height: 108rpx;
		padding: 0 20rpx;
		background-size: 100% 100%;
		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
		.sub {
			font-size: 24rpx;
			color: #666;
			margin-left: 16rpx;
		}
		.more {
			margin-left: auto;
			font-size: 24rpx;
		}
	}
}
.top10 {
	margin-top: 10rpx;
	padding: 0 24rpx;
	.goods-box {
		position: relative;
		width: 710rpx;
		padding: 10rpx;
		font-size: 28rpx;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
		.goods-img {
			width: 240rpx;
			height: 240rpx;
			min-width: 240rpx;
			.u-wrap {
				background-color: transparent !important;
			}
		}
		.content {
			flex: 1;
			height: 240rpx;
			padding: 10rpx 0 2rpx 16rpx;
		}

		.title {
			// width: 100%;
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			line-height: 42rpx;
		}
		.subtitle {
			align-self: baseline;
			max-width: 420rpx;
			margin-top: 6rpx;
			padding-left: 8rpx;
			font-size: 24rpx;
			color: #7d4402;
			line-height: 32rpx;
			border-radius: 4rpx;
			border: 1rpx solid #eae1c8;
		}
		.cate {
			align-self: baseline;
			height: 34rpx;
			margin-top: 8rpx;
			padding-right: 16rpx;
			text {
				padding: 0 16rpx;
				color: #7d4402;
				font-size: 24rpx;
				line-height: 34rpx;
			}
			image {
				width: 80rpx;
				height: 34rpx;
			}
		}
		.selling-point {
			text {
				display: inline-block;
				margin-right: 8rpx;
				padding: 0 12rpx;
				font-size: 22rpx;
				color: #999;
				border-radius: 36rpx;
				background-color: rgb(248, 248, 248);
			}
		}
		.price {
			margin-top: auto;
			color: rgb(227, 13, 13);
			font-size: 26rpx;
			height: 40rpx;
			font-family: 'AllAndNone';
			.priceMin {
				font-size: 34rpx;
				margin-right: 4rpx;
				font-weight: bold;
			}
			.marketPrice {
				margin-left: 6rpx;
				font-size: 24rpx;
				color: #999;
				text-decoration: line-through;
			}
			.spec {
				font-size: 24rpx;
			}
			.go-to-detail {
				margin-left: auto;
				color: #fff;
				border-radius: 8rpx;
				padding-left: 16rpx;
				padding-right: 16rpx;
				height: 46rpx;
				line-height: 46rpx;
				background-image: linear-gradient(to right, rgb(240, 206, 123), rgb(221, 177, 81));
			}
		}
		.labelbox {
			margin-left: auto;
			text {
				display: inline-block;
				margin-right: 10rpx;
				padding: 0 10rpx;
				height: 32rpx;
				border-radius: 4rpx;
				text-align: center;
				color: #ffffff;
				background-color: #d96b6c;
				line-height: 32rpx;
				font-size: 24rpx;
			}
		}
		.ranking {
			position: absolute;
			left: 16rpx;
			top: 0;
			width: 44rpx;
			height: 48rpx;
		}
	}
}
.pinlei {
	.item-box {
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 24rpx;
		.item {
			width: 224rpx;
			margin-bottom: 20rpx;
			padding-bottom: 6rpx;
			border-radius: 12rpx;
			overflow: hidden;
			background-image: linear-gradient(to top, rgb(241, 222, 189), rgb(255, 248, 238));
			.img {
				width: 224rpx;
				height: 224rpx;
				border-radius: 12rpx;
				overflow: hidden;
				.u-wrap {
					background: transparent !important;
				}
			}
			.info {
				position: relative;
				left: 50%;
				display: inline-flex;
				transform: translateX(-50%);
				margin-top: 0;
				padding: 0 12rpx;
				background-image: linear-gradient(to left, rgb(248, 71, 2), rgb(216, 33, 3));
				border-radius: 32rpx;
				text {
					font-size: 26rpx;
					color: #fff;
				}
				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
			.summary {
				margin-top: 6rpx;
				font-size: 24rpx;
				color: #666;
				text-align: center;
			}
		}
	}
}
.ad-banner {
	width: 750rpx;
	height: 77rpx;
	margin: 20rpx 0;
	image {
		width: 100%;
		height: 100%;
	}
}
.module-title {
	width: 750rpx;
	height: 117rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.waterfall {
	.goods-list {
		padding: 0 24rpx;
		justify-content: space-between;
		flex-wrap: wrap;
		.goods-box {
			width: 342rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
			overflow: hidden;
			.goods-img {
				width: 342rpx;
				height: 342rpx;
			}
			.title {
				padding: 0 10rpx;
				// width: 100%;
				font-size: 30rpx;
				color: #333;
				line-height: 42rpx;
			}
			.price {
				margin: 6rpx 0;
				padding: 0 10rpx;
				color: rgb(227, 13, 13);
				font-size: 26rpx;
				height: 40rpx;
				font-family: 'AllAndNone';
				.priceMin {
					font-size: 34rpx;
					margin-right: 4rpx;
					font-weight: bold;
				}
				.marketPrice {
					margin-left: 6rpx;
					font-size: 24rpx;
					color: #999;
					text-decoration: line-through;
				}
				.spec {
					font-size: 24rpx;
				}
			}
			.rankinfo {
				justify-content: space-between;
				height: 80rpx;
				padding: 0 18rpx;
				background-image: linear-gradient(to right, rgb(252, 238, 218), rgb(255, 227, 188));
				text {
					color: #804409;
					font-size: 30rpx;
				}
				image {
					width: 32rpx;
					height: 32rpx;
					transform: rotate(-90deg);
				}
			}
		}
	}
}
</style>
